<!-- Rent -->
<template>
  <div>
    <van-nav-bar title="发布房源">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <div class="rentAddList">
      <!-- <van-cell-group> -->
      <van-cell title="房源信息" />
      <van-cell
        title="小区名称"
        is-link
        :value="value"
        to="/rent/search"
      />
      <!-- <van-cell title="租   金" value="¥/月" /> -->
      <van-field
        v-model="obj.price"
        label="租   金"
        placeholder="请输入租金/月"
      >
        <template #extra>¥/月</template>
      </van-field>
      <van-field
        v-model="obj.size"
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #extra>m²</template>
      </van-field>
      <!-- <van-cell title="建筑面积" value="m²" /> -->
      <van-cell title="户    型" is-link :value="item1" @click="show1 = true" />
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-picker
          show-toolbar
          :columns="columns1"
          @cancel="onCancel"
          @confirm="onConfirm1"
        />
      </van-popup>
      <van-cell title="所在楼层" is-link :value="item2" @click="show2 = true" />
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-picker
          show-toolbar
          :columns="columns2"
          @cancel="onCancel"
          @confirm="onConfirm2"
        />
      </van-popup>
      <van-cell title="朝    向" is-link :value="item3" @click="show3 = true" />
      <van-popup v-model="show3" position="bottom" :style="{ height: '50%' }">
        <van-picker
          show-toolbar
          :columns="columns3"
          @cancel="onCancel"
          @confirm="onConfirm3"
        />
      </van-popup>
      <van-cell title="房屋标题">
        <template #label>
          <input
            type="text"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
            v-model="obj.title"
            style="width:100%;height: 20px;border:none;"
          />
        </template>
      </van-cell>
      <van-cell title="房屋图像">
        <template #label>
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
          ></van-uploader>
        </template>
      </van-cell>
      <van-cell title="房屋配置">
        <template #label>
          <van-grid square :column-num="5" icon-size="14px">
            <van-grid-item text="衣柜" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-yigui" />
              </template>
              <!-- <template #text>衣柜</template> -->
            </van-grid-item>
            <van-grid-item text="洗衣机" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-xiyiji" />
              </template>
            </van-grid-item>
            <van-grid-item text="空调" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-kongtiao" />
              </template>
            </van-grid-item>
            <van-grid-item text="天然气" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-meiqitianranqi" />
              </template>
            </van-grid-item>
            <van-grid-item text="冰箱" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-bingxiang" />
              </template>
            </van-grid-item>
            <van-grid-item text="暖气" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-nuanqi-" />
              </template>
            </van-grid-item>
            <van-grid-item text="电视机" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-dianshiji1" />
              </template>
            </van-grid-item>
            <van-grid-item text="热水器" @click="clickFn">
              <template #icon>
                <van-icon
                  class="iconfont icon-haofangtuo400iconfont2reshuiqi"
                />
              </template>
            </van-grid-item>
            <van-grid-item text="宽带" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-wifi" />
              </template>
            </van-grid-item>
            <van-grid-item text="沙发" @click="clickFn">
              <template #icon>
                <van-icon class="iconfont icon-tubiaoCSban-" />
              </template>
            </van-grid-item>
          </van-grid>
        </template>
      </van-cell>
      <van-cell title="房屋描述">
        <template #label>
          <textarea
        placeholder="请输入房屋描述信息"
        rows="5"
        style="width:100%;height: 128px;border:none;"
        v-model="obj.description"
      ></textarea>
        </template>
      </van-cell>
      <!-- </van-cell-group> -->
    </div>
    <div class="buttomNav">
      <van-button
        class="btn1"
        color="#fff"
        square
        type="primary"
        @click="cancelFn"
      >
        <template #default>
          <div class="btnText">取消</div>
        </template>
      </van-button>
      <van-button
        class="btn2"
        color="#57b67e"
        square
        type="info"
        @click="houseBtnFn"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { publishHouseAPI } from '@/api'
export default {
  data () {
    return {
      value: this.$store.state.communityName === '' ? '请输入小区名称' : this.$store.state.communityName,
      show1: false,
      show2: false,
      show3: false,
      item1: '请选择',
      item2: '请选择',
      item3: '请选择',
      columns1: ['一室', '二室', '三室', '四室', '四室+'],
      columns2: ['高楼层', '中楼层', '低楼层'],
      columns3: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      fileList: [],
      icon: [],
      obj: {
        community: '',
        price: '', // 租金的表单
        size: '', // 面积的表单
        roomType: '', // 户型id
        floor: '', // 楼层id
        oriented: '', // 朝向id
        title: '', // 房屋标题
        description: '', // 房屋描述
        houseImg: '', // 图片
        supporting: '' // icon
      }
    }
  },
  methods: {
    onCancel () {
      this.show1 = this.show2 = this.show3 = false
    },
    onConfirm1 (value, index) {
      // console.log(value)
      this.item1 = value
      this.show1 = false
      this.obj.roomType = value
    },
    onConfirm2 (value, index) {
      // console.log(value)
      this.item2 = value
      this.show2 = false
      this.obj.floor = value
    },
    onConfirm3 (value, index) {
      // console.log(value)
      this.item3 = value
      this.show3 = false
      this.obj.oriented = value
    },
    cancelFn () {
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源？',
        cancelButtonText: '放弃',
        confirmButtonText: '继续编辑',
        confirmButtonColor: '#418ce1'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.back()
        })
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      // this.fileList.push({
      //   url: file.content
      // })
      console.log(this.fileList)
      this.obj.houseImg = this.fileList
    },
    clickFn (ev) {
      // console.log(ev)
      console.log(ev.target.innerText)
      this.icon.push(ev.target.innerText)
      this.obj.supporting = this.icon.join('|')
    },
    async houseBtnFn () {
      console.log(this.obj)
      if (this.obj.houseImg === '') {
        Toast.fail('请传入房屋图片')
      } else {
        const { status } = await publishHouseAPI(this.obj)
        if (status === 200) {
          Toast.success('发布成功')
        } else {
          Toast.fail('发布失败')
        }
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler () {
        this.obj.community = this.$store.state.community
      }
    }
  }
}
</script>
<style lang='less' scoped>
.housePhoto {
  border: 1px solid #999;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.buttomNav {
  z-index: 99;
  position: fixed;
  bottom: 0;
  width: 100%;
  .btn1 {
    width: 50%;
    .btnText {
      color: #57b67e;
    }
  }
  .btn2 {
    width: 50%;
  }
}
.rentAddList {
  margin-bottom: 50px;
}
.listLast {
  height: 150px;
  margin-top: 10px;
}
</style>
